<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!--
      HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
    -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .wrap {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url('images/bg03.jpg') center bottom no-repeat;
            overflow: auto;
        }
        
        .navbar-brand {
            padding: 10px 15px;
        }
        
        .page-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        .file-input {
            outline: none;
            display: inline-block;
            margin-top: 5px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-horizontal {
            margin-top: 10px;
        }
        
        .logout {
            font-weight: 900;
            font-size: 20px;
            color: #ff0000;
            text-decoration: none;
        }
        
        .logout:hover {
            text-decoration: none;
            color: yellowgreen;
        }
        
        .preview {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <nav class="navbar  navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
                </div>
            </div>
        </nav>


        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading clearfix">
                            <div class="row">
                                <div class="col-md-6 page-title">英雄信息修改</div>
                                <div class="col-md-6 text-right">当前位置：首页 &gt; 英雄信息修改</div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <form action="#" method="" class="form-horizontal">
                                <!-- 隐藏一个input  隐藏域：天生自带隐藏功能-->
                                <!-- 第二种方法显示英雄id 与代码171行 -->
                                <!-- <input type="text" name="id" id="inputId" style="display: none;" /> -->
                                <input type="hidden" name="id" id="inputId" />

                                <div class="form-group">
                                    <label for="heroName" class="col-sm-2 control-label">姓名</label>
                                    <div class="col-sm-10">
                                        <input required type="text" class="form-control" id="heroName" name="name" placeholder="请输入姓名" value="盖伦" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="skillName" class="col-sm-2 control-label">技能</label>
                                    <div class="col-sm-10">
                                        <input required type="text" class="form-control" id="skillName" name="skill" placeholder="请输入技能" value="躲草丛" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="heroIcon" class="col-sm-2 control-label">头像</label>
                                    <div class="col-sm-10">
                                        <input required type="file" class="file-input" id="heroIcon" name="icon" />
                                        <!-- 预览的标签 -->
                                        <img src="lib/img/盖伦.png" class="preview" alt="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-primary btn-save">
                                            保存
                                        </button>
                                        <button type="submit" class="btn btn-cancel">取消</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
    <!--
    Include all compiled plugins (below), or include individual files as needed
  -->
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>

    <script>
        //编辑第一步:
        //1.获取从首页 点击编辑 按钮传递过来的英雄id. 
        //  通过window.location.search可以获取 url中?以及?后面的内容.
        //console.log(window.location.search); //?id=2
        let heroId = window.location.search.split('=')[1];
        console.log(heroId);
        //2.根据id, 发送ajax请求,获取该英雄的信息
        $.ajax({
            type: 'get',
            url: 'http://localhost:4399/hero/id',
            data: {
                id: heroId
            },
            success: function(backData) {
                console.log(backData);
                if (backData.code == 200) {
                    //3.把这些信息填入到 当前这个页面(edit.html) 的对应标签中.
                    $('#heroName').val(backData.data.name);
                    $('#skillName').val(backData.data.skill);
                    $('img.preview').attr('src', backData.data.icon);
                    // 返回的数据还有一个id没有放入到某一个标签
                    $('#inputId').val(backData.data.id)
                }
            },

        })


        //一:图片预览

        $('#heroIcon').on('change', function() {
            //1.获取你选中的图片
            let fileCheck = this.files[0];
            //2.通过URL对象创建一个url. 
            let urlAddress = URL.createObjectURL(fileCheck);
            //3.把这个创建出来的url交给预览用的img的src属性.
            $(this).next().attr('src', urlAddress);
        });
        // $('#heroIcon').on('change', function() {
        //     let fileCheck = this.files[0];
        //     let urlAddress = URL.createObjectURL(fileCheck);
        //     $(this).next().attr('src', urlAddress)
        // })

        //编辑第二步:
        //1.给保存按钮设置一个点击事件
        $('.btn-save').on('click', function(e) {
            //保存按钮是form表单中的一个submit按钮,所以要阻止他的默认跳转.
            e.preventDefault();
            //2.创建一个fd对象,为dom对象
            let fd = new FormData($('form')[0]);
            // 检测：表单的name属性是否与接口名字一致
            //接口参数 icon,name,skill,id  ，但此时fd没有英雄id属性，需要创建英雄id
            // name='id'== >name='heroId'
            // 第一种方法获取英雄id
            // fd.append('id', heroId);

            // 检测是否存在以下数据
            // console.log(fd.get('name'));
            // console.log(fd.get('skill'));
            // console.log(fd.get('icon'));
            // console.log(fd.get('id'));

            //3.发送ajax请求做编辑.
            $.ajax({
                type: 'post',
                url: 'http://localhost:4399/hero/update',
                data: fd,
                contentType: false,
                processData: false,
                success: function(backData) {
                    console.log(backData);
                    //3.编辑成功就跳回到首页
                    if (backData.code == 202) {
                        alert('修改成功');
                        window.location.href = './index.html'
                    }
                }
            })

        })
    </script>
</body>

</html>